{% extends "notes/base.html" %}
{% load tags_template %}
{% block extrahead%}
    <style>
.tipbar {
	border: 1px solid #000000;
	font-size: 12px;
	position: absolute;
}
.tipbar #menu{
	position: relative;
	top: -16px;
	left: 2px;
	float: left;
}
.resizeSE,
.resizeE,
.resizeW,
.resizeSW,
.resizeS
{
	position: absolute;
	/*background-color: #333;
	border: 1px solid #fff;*/
	overflow: hidden;
}
.resizeSE{
	bottom: -5px;
	right: -5px;
	index:1;
	cursor: se-resize;
	width:15px;
	height:15px;
}
.resizeE
{
  top:0px;
	right: -1px;
	margin-top: 0px;
	margin-bottom:0px;
	height:100%;
	width:5px;
	cursor: e-resize;
}
.resizeNE
{
	top: -10px;
	right: -10px;

	cursor: ne-resize;
}
.resizeN
{
	top: -10px;
	left: 50%;
	margin-left: -5px;
	cursor: n-resize;
}
.resizeNW{
	top: -10px;
	left: -10px;
	cursor: nw-resize;
}
.resizeW
{
  top:0px;
	width:5px;
	left: -1px;
	height:100%;
	margin-top: 0px;
	margin-bottom:5px;
	cursor: w-resize;
}
.resizeSW
{
	left: -5px;
	bottom: -5px;
	cursor: sw-resize;
	width:15px;
	height:15px;
	background-color: None;
}
.resizeS
{
	bottom: -1px;
	width:100%;
	height:2px;
	cursor: s-resize;
}

    </style>
<script language="javascript" src="/js/jquery.js"></script>
<script language="javascript" src="/js/interface.js"></script>
<script type="text/javascript">
$(document).ready(
	function()
	{
		$('.tipbar').Draggable({	
		    ghosting:	false,
		    insideParent:true,
				opacity:	0.5});
	
	$(".tipbar").each(function(i){
		  name=$(this).attr('name');
		  $(this).Resizable(
			{
				minWidth: 150,
				minHeight: 150,
				maxWidth: 700,
				maxHeight: 600,
			  
				dragHandle: false,
			  
				handlers: {
					se: '#se_'+name,
					e: '#e_'+name,
					//ne: '#ne'+name,
					//n: 'n_'+name,
					//nw: '#nw_'+name,
					w: '#w_'+name,
					sw: '#sw_'+name,
					s: '#s_'+name
				},
				onStop : function(size, position) {
					name=$(this).attr('name');
					$('#e_'+name).height(this.style.height);
					$('#w_'+name).height(this.style.height);
					
				}
				
			}
		)
	});

		
		
	}
);
</script>
{% endblock %}

{% block content %}


{% for entry in object_list %}
    <div class="tipbar" id="bar_{{entry.id}}" name="{{entry.id}}" value={{entry.id}} style="left:{{forloop.counter}}0px;top:{{forloop.counter}}0px;height:150px;width:150px;background-color:yellow">
  <div class="resizeSE" id="se_{{entry.id}}"></div>
	<div class="resizeE" id="e_{{entry.id}}"></div>
	
	<div class="resizeW" id="w_{{entry.id}}"></div>
	<div class="resizeSW" id="sw_{{entry.id}}"></div>
	<div class="resizeS" id="s_{{entry.id}}"></div>
	
    <b>{{ entry.title }}</b> {{ entry.pub_date|date:"Y/m/d P" }} <a href="/edit/{{entry.id}}">edit</a> <a href="/del/{{entry.id}}">del</a>
    <div style="">
    <p>{{ entry.content }}</p>
    <p>{{ entry.tag_list}}</p>
    
    <p><a href="/edit/{{entry.id}}">Edit</a> <a href="/del/{{entry.id}}">del</a> </p></div>
    </div>
    

{% endfor %}








{% endblock %}
